<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    @close="handleClose">
    <tree-table
      v-loading="tabLoading"
      ref="refTable"
      :data="dataList"
      :columns="columns"
      :eval-func="func"
      :expand-all="false"
      max-height="300"
      @selection-change="handleSelectionChange">
      <el-table-column
        prop="url"
        label="请求地址"
        width="150"/>
      <el-table-column
        prop="method"
        label="请求方式"
        width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.method === 'post'" class="badge badge-primary">{{ scope.row.method }}</span>
          <span v-if="scope.row.method === 'delete'" class="badge badge-danger">{{ scope.row.method }}</span>
          <span v-if="scope.row.method === 'put'||scope.row.method === 'patch'" class="badge badge-warning">{{ scope.row.method }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="resourceType"
        label="类型"
        width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.resourceType === 'MENU'" class="label label-primary">菜单</span>
          <span v-if="scope.row.resourceType === 'BUTTON'" class="label label-warning">按钮</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="permission"
        label="权限标识"
        width="180"/>
    </tree-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button :loading="isSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import treeTable from '@/components/TreeTable'
import treeToArray from '@/components/TreeTable/eval'

import { getResourceByRoleId, getList, saveResourceByRoleId } from '@/api/resource'

import resultCode from '@/utils/resultCode'
import { add, update } from '@/api/role'

export default {
  components: { treeTable },
  data() {
    return {
      func: treeToArray,
      visible: false,
      isSubmit: false,
      tabLoading: false,
      title: '角色授权',
      roleId: null,
      dataList: [],
      resourceList: [],
      columns: [
        {
          text: '资源名称',
          value: 'name',
          width: 200
        }
      ],
      mulSelection: []
    }
  },
  methods: {
    init(id) {
      this.roleId = id
      this.visible = true
      this.searchList()
    },
    searchList: function() {
      this.tabLoading = true
      getList('', '').then(response => {
        const result = response.data// 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          console.log('=========datalist=========')
          console.log(result.data)
          this.dataList = result.data
          this.getResource(this.roleId)
        }
      })
    },
    getResource: function(roleId) { // 获取权限
      getResourceByRoleId(roleId).then(response => {
        const result = response.data// 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          console.log('=========resourceList=========')
          console.log(result.data)
          this.resourceList = result.data
          // 选中权限
          if (this.resourceList !== null) {
            this.selectTable(this.dataList)
          }
        }
        this.tabLoading = false
      })
    },
    selectTable: function(list) { // 递归选中权限
      if (list && list.length > 0) {
        list.forEach(row => {
          console.log('-------row.id----' + row.id)
          let selected = false
          this.resourceList.forEach(resource => {
            console.log('----row.id=' + row.id + '----resource.id=' + resource.id)
            if (row.id === resource.id) {
              selected = true
            }
          })
          this.$refs.refTable.toggleRowSelection(row, selected)
          if (row.children && row.children.length > 0) {
            this.selectTable(row.children)
          }
        })
      }
    },
    handleSelectionChange: function(val) {
      this.mulSelection = val
    },
    handleSubmit: function() {
      this.isSubmit = true
      const resourceIds = []
      this.mulSelection.forEach(row => {
        resourceIds.push(row.id)
      })
      const strResourceIds = resourceIds.join(',')
      saveResourceByRoleId(this.roleId, strResourceIds).then(response => {
        const result = response.data // 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          this.visible = false
          this.$message.success('设置成功')
        }
        this.isSubmit = false
      }).catch(err => {
        this.isSubmit = false
      })
    },
    resetForm: function() {
      this.visible = false
    },
    handleClose: function() {
    }
  }
}
</script>
